<template>
    <div class='item-wrapper'>
        <div class='item-user'>
            <userSpan v-if='value.inputUser' :id='value.inputUser'></userSpan>
            <Divider type="vertical" />
            <Time :time="value.inputDate" :interval="60" />
            <Divider type="vertical" />
            <p>
                <Tag v-for='(tv,tk) in tagList' :key='tk' >{{tv}}</Tag>
            </p>
        </div>
        <div class='item-up'>
            <Icon type="ios-eye" size='22'/>
            {{value.num}}
        </div>
        <div class='item-info'>
            <div class='title' >
                {{value.title}}
            </div>
        </div>
        <div class='item-down'>
            <Icon type="ios-chatboxes" size='18'/>
            {{value.answerList?value.answerList.length:0}}
        </div>
    </div>
</template>
<script>
import userSpan from '@@/span/user';
export default {
    props:{
        value:{
            type:Object,
            default(){
                return {
                    
                }
            }
        }
    },
    components:{
        userSpan
    },
    data(){
        return {
            cityMap:{
                'sjz':'石家庄',
                'nj':'南京',
                'zz':'郑州',
            },
            webMap:{
                '58':'58',
                'ajk':'安居客',
                'bk':'贝壳',
                'ftx':'房天下',
            }
        }
    },
    computed:{
        tagList(){
            return this.value.tags?this.value.tags.split(';').filter(i=>i):[];
        }
    },
    mounted(){
    },
    methods:{

    }
}
</script>
<style lang="less" scoped>
    .item-wrapper {
        padding: 10px;
        display: grid;
        grid-template-columns: auto 50px;
        grid-template-rows: auto;
        grid-gap: 2px;
        border: 2px solid #eee;
        border-radius: 5px;
        margin: 2px 0px;
        &:hover {
            border: 2px solid tomato;
        }
        img {
            grid-column-start: 1;
            grid-column-end: 2;
        }
        >div{
            .title {
                color: crimson;
                font-size: 1.5em;
                font-weight: 600;
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/*超出部分文字以...显示*/
            }
        }
    }
    .item-user {
        padding: 10px;
        display:flex;
        align-items:center; 
        >img{
            width:auto;
	        height:40px;
        }
    }
    .item-up {
        padding: 5px;
        display:flex;
        align-items:flex-start;
    }
    .item-info {
        padding: 10px;
        display: grid;
        align-items:center; 
        grid-template-columns: auto;
        grid-template-rows: auto;
        justify-items:start;
    }
    .item-down {
        padding: 5px;
        display:flex;
        align-items:flex-end; 
    }
</style>
